/* 全局样式 */
:root {
    --primary-color: #4ade80; /* 绿色作为主色调，代表温暖和希望 */
    --secondary-color: #60a5fa; /* 蓝色作为辅助色，代表信任和稳定 */
    --accent-color: #fbbf24; /* 黄色作为强调色，代表活力和温暖 */
    --text-color: #1e293b; /* 深色文本 */
    --light-text: #64748b; /* 浅色文本 */
    --background: #f8fafc; /* 背景色 */
    --card-bg: #ffffff; /* 卡片背景色 */
    --border-color: #e2e8f0; /* 边框颜色 */
}

/* 自定义工具类 */
.content-auto {
    content-visibility: auto;
}

/* 基础样式覆盖 */
body {
    background-color: var(--background);
    color: var(--text-color);
}

/* 组件样式 */
.card {
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 按钮样式 */
.btn-primary {
    @apply bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-6 rounded-full transition-all shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-100 text-green-500 font-medium py-3 px-6 rounded-full transition-all shadow-md hover:shadow-lg border border-green-200;
}

/* 导航栏样式 */
.nav-link {
    @apply text-gray-700 hover:text-green-500 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-green-500 after:transition-all hover:after:w-full;
}

/* 动画效果 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .feature-card {
        padding: 1rem;
    }
}

/* 表单样式 */
.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all;
}

/* 日记卡片样式 */
.diary-card {
    @apply bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300 border border-gray-100;
}

/* 徽章样式 */
.badge {
    @apply text-xs font-semibold px-2.5 py-0.5 rounded-full;
}

.badge-primary {
    @apply bg-green-100 text-green-800;
}

.badge-secondary {
    @apply bg-blue-100 text-blue-800;
}

/* 底部导航栏 */
.bottom-nav {
    @apply fixed bottom-0 w-full bg-white shadow-lg border-t border-gray-200 z-20;
}

.bottom-nav-item {
    @apply flex flex-col items-center py-2 px-4 text-gray-500 hover:text-green-500 transition-colors;
}

.bottom-nav-item.active {
    @apply text-green-500;
}